<!-- 忘记密码 -->
<template>
 	<view class="container">
 		<view class="content">
			<u--form
				labelPosition="top"
				:model="form"
				:rules="rules"
				ref="form"
			>
				<u-form-item
					label="旧密码"
					prop="oldPassword"
					ref="item1"
					:labelWidth="100"
				>
					<u-input
					    placeholder="请输入旧密码"
						clearable
					    border="bottom"
						:password="true"
						v-model="form.oldPassword"
						password-icon
						color="#7F7F7F"
						placeholderStyle="color: #C6C6C6; font-size: 14px;"
						@change="onChangePassword"
					  >
					  </u-input>
					  <!-- <view style="border-bottom: 1px solid #dadbde;">
					  	<basic-input 
					  		placeholder="请输入旧密码"
					  		:clearable="true"
					  		v-model="form.oldPassword"
					  		@change="onChangePassword" 
					  		style="margin-left: 20rpx;"  
					  		type="password" 
					  		:border="false" 
					  		placeholderStyle="color: #C6C6C6; font-size: 26rpx;" 
					  		:custom-style="{color: '#7F7F7F'}"
					  	></basic-input>
					  </view> -->
				</u-form-item>
				<u-form-item
					label="新密码"
					prop="newPassword"
					ref="item1"
					:labelWidth="100"
				>
					<u-input
					    placeholder="请输入新密码"
						clearable
					    border="bottom"
						:password="true"
						v-model="form.newPassword"
						password-icon
						color="#7F7F7F"
						placeholderStyle="color: #C6C6C6; font-size: 14px;"
						@change="onChangePassword"
					  >
					  </u-input>
				</u-form-item>
				<u-form-item
					label="确认新密码"
					prop="confirmPassword"
					ref="item1"
					:labelWidth="100"
				>
					<u-input
					    placeholder="请再次输入新密码"
						clearable
					    border="bottom"
						:password="true"
						v-model="form.confirmPassword"
						password-icon
						color="#7F7F7F"
						placeholderStyle="color: #C6C6C6; font-size: 14px;"
						@change="onChangePassword"
					  >
					  </u-input>
				</u-form-item>
			</u--form>
 			<view class="btn">
 				<u-button
 					class="custom-style"
 					hover-class="none"
 					color="#1E6FFFFF"
 					:disabled="isLogin"
 					@click="_login"
 					
 				>
					确定
 				</u-button>
 			</view>
 		</view>
		
		<u-toast ref="uToast"></u-toast>
 		<u-no-network></u-no-network>
 	</view>
 </template>
 <script>
 	import {
 		updatePassword
 	} from '../../api/index.js'
 	import {
 		mapState,
 		mapActions
 	} from 'vuex';
	import BasicInput from '@/components/BasicInput/BasicInput.vue'
 	export default {
 		components: {
			BasicInput
 		},
 		data() {
 			return {
 				form: {
 					oldPassword: '',
 					newPassword: '',
					confirmPassword: ''
 				},
				rules: {
					oldPassword: [
						{
							required: true,
							message: '请输入旧密码!',
							trigger: ['blur', 'change']
						}
					],
					newPassword: [
						{
							required: true,
							message: '请输入新密码!',
							trigger: ['blur', 'change']
						}, 
						{
							pattern:/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[\W_]).{8,}$/,
							message: '密码由8位数字、大小写字母和特殊符号组成!',
							trigger: ['blur', 'change']
						}
					],
					confirmPassword: [
						{
							required: true,
							message: '请输入确认密码!',
							trigger: ['blur', 'change']
						}, 
						{
							asyncValidator: (rule, value, callback) => {
								const form = this.form;
								if (value && value !== form.getFieldValue('newPassword')) {
									callback(new Error('两次输入的密码不一样!'));
								} else {
									callback()
								}
							},
						}
					],
					
				},
				isLogin: true, // 是否可以点击登录
				confirmDirty: false
 			};
 		},
 		onLoad () {
			
 		},
 		methods: {
			
 			...mapActions(['setUserInfo']),
			
			onChangePassword () {
				if (this.form.oldPassword && this.form.newPassword && this.form.confirmPassword) {
					this.isLogin = false
				} else {
					this.isLogin = true
				}
			},
			
			// 点击忘记密码
			onForgetPassword () {
				uni.navigateTo({
					url: '/pages/login/forgetPassword'
				})
			},
			
 			//登录
 			_login() {
				const that = this;
				this.$refs.form.validate().then(res => {
					// uni.$u.toast('校验通过')
					if (this.form.confirmPassword != this.form.newPassword) {
						uni.showToast({
							title: '请确认两次密码输入是否一致',
							icon: 'none'
						})
						return false
					}
					uni.showLoading({
						title: '修改中...',
						mask: true
					})
					const data = {
						confirmpassword: this.form.confirmPassword,
						oldpassword: this.form.oldPassword, // 旧密码
						password: this.form.newPassword, // 新密码
						username: uni.getStorageSync('userInfo').username || ''
					}
					updatePassword(data).then(res => {
						uni.hideLoading();
						if (res.success) {
							this.$refs.uToast.show({
								message: '修改密码成功',
								type: 'success',
								complete() {
									uni.reLaunch({
										url: '/pages/login/login'
									})
								}
							})
							
						}
						
					}).catch(res => {
						uni.hideLoading();
						uni.showToast({
							title: res.message || '服务器报错，请重试！',
							icon: 'none',
						})
					})
				}).catch(errors => {
					// uni.$u.toast('请输入正确')
				})
 				
				
 			},
			
			// 选择了部门
			onChoice (item) {
				this.showDepartment = false
				var that = this
				this.$refs.uToast.show({
					message: '切换部门成功',
					type: 'success',
					complete() {
						uni.switchTab({
							url: '/pages/synergy/synergy'
						})
					}
				})
			},
			// 点击部门取消
			onClose () {
				this.showDepartment = false
			}
 		}
 	};
 </script>
 <style>
	 page{
		 background-color: #ffffff;
	 }
 </style>
 <style lang="scss" scoped>
 	.container {
 		width: 100%;
 		height: auto;
		background: #FFFFFF;
 	}
 
 	.login-title {
		font-size: 20px;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #1A1A1A;
		text-align: center;
		padding-top: 30%;
 	}
 	
 	.content{
 		padding: 60rpx 50rpx;
 		.form-input{
 			padding: 40rpx 0rpx;
 			.input-left{
 				display: flex;
 				align-items: center;
 				.text{
 					font-size: 12px;
 					font-family: PingFangSC-Regular, PingFang SC;
 					font-weight: 400;
 					color: #171717;
 				}
 			}
 			.input{
 				padding-top: 20rpx;
 				flex: 1;
 				// border-bottom: 1px solid #E5E5E5FF;
 			}
 		}
 	}
 
 	.btn {
 		padding: 40rpx 0 20rpx;
 	}
 
 	.remand {
		text-align: right;
		font-size: 15px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #8F8F8F;
 		// margin-top: 40rpx;
 		// display: flex;
 		// justify-content: space-between;
 
 		.name {
 			color: #8F8F8F;
 		}
 		
 		.register{
 			color: #2979ff;
 		}
 	}
 
 // 	.place-white {
 // 		color: rgb(255, 255, 255) !important;
 // 	}
 </style>
 